<template>
  <div>
    <div class="sidebar" >
      <el-menu
              :default-active="active"
              class="el-menu-vertical"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
      >
        <el-menu-item index="1">
          <i class="el-icon-s-home"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span>博客中心</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1" @click="goWriteBlog()" >写博客</el-menu-item>
            <el-menu-item index="1-2" @click="goClassify()">公共分类管理</el-menu-item>
            <el-menu-item index="1-3" @click="goBlogs()">网站音乐管理</el-menu-item>
            <el-menu-item index="1-4" @click="goDiary()">网站更新</el-menu-item>
            <el-menu-item index="1-5" @click="goLinkManage()">友链管理</el-menu-item>
            <el-menu-item index="1-6" @click="goGameManage()">小游戏管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item index="4" >
          <i class="el-icon-monitor"></i>
          <span slot="title" >职位中心</span>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
  export default {
    name: "admin-menu",
    data() {
      return {
        active: "1"
      }
    },
    methods: {
      goWriteBlog(){
        this.$router.push("/adminWork/writeBlogOld")
      },
      goClassify(){
        this.$router.push("/adminWork/classify")
      },
      goBlogs(){
        this.$router.push("/adminWork/musicManagement")
      },
      goDiary(){
        this.$router.push("/adminWork/diaryManagement")
      },
      goLinkManage(){
        this.$router.push(("/adminWork/linkManagement"))
      },
      goGameManage(){
        this.$router.push(("/adminWork/playManagement"))
      }
    }
  }
</script>

<style scoped>
  .el-menu-vertical {
    min-height: 600px;
  }

  .sidebar .btn_create {
    display: block;
    height: 45px;
    line-height: 45px;
    font-size: 18px;
    color: #fff;
    background: #91cebe url(img/icon_add.png) 45px center no-repeat;
    padding-left: 70px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 15px;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    transition: .2s
  }

  .sidebar .btn_create:hover {
    color: #fff;
    background-color: #019875
  }
</style>